<template>
  <div class="calendar-page">
    <el-card>
      <template #header>
        <span class="title">项目日历</span>
      </template>

      <el-calendar>
        <template #date-cell="{ data }">
          <div class="calendar-day">
            <p>{{ data.day.split('-').slice(2).join('-') }}</p>
            <div v-if="hasEvents(data.day)" class="day-events">
              <el-tag size="small" type="primary">2个任务</el-tag>
            </div>
          </div>
        </template>
      </el-calendar>
    </el-card>
  </div>
</template>

<script setup>
const hasEvents = (day) => {
  // 模拟数据
  return Math.random() > 0.8
}
</script>

<style scoped>
.calendar-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.calendar-day {
  text-align: center;
  padding: 5px;
}

.day-events {
  margin-top: 5px;
}
</style>

